<template>
  <div>
    <el-card class="box-card-toInWaed" style="margin-left: 25px">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="病历编号" style="margin-left: 50px">
          <el-input v-model="formInline.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="病人姓名" style="margin-left: 50px">
          <el-input v-model="formInline.userName" disabled></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="病人年龄" style="margin-left: 50px">
          <el-input v-model="formInline.data_birth" disabled></el-input>
        </el-form-item>
        <el-form-item label="病人血型" style="margin-left: 50px">
          <el-input v-model="formInline.blood" disabled></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="病人性别" style="margin-left: 50px">
          <el-input v-model="formInline.gender_name" disabled></el-input>
        </el-form-item>
        <el-form-item label="联系电话" style="margin-left: 50px">
          <el-input v-model="formInline.mobile" disabled></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="科室名称" style="margin-left: 50px">
          <el-input v-model="formInline.department_info" disabled></el-input>
        </el-form-item>
        <el-form-item label="诊断结果" style="margin-left: 50px">
          <el-input v-model="formInline.result_info" type="textarea" autosize></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="医生姓名" style="margin-left: 50px">
          <el-input v-model="formInline.docName" disabled></el-input>
        </el-form-item>
        <el-form-item label="医生类型" style="margin-left: 50px">
          <el-input v-model="formInline.docType" disabled></el-input>
        </el-form-item>
      </el-form>
      <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
          :rules="rules"
      >
        <el-form-item label="选择病房" prop="wardType" style="margin-left: 40px">
          <el-select v-model="formInline.wardType" placeholder="病房类型">
            <el-option label="普通病房" value="1"></el-option>
            <el-option label="高级病房" value="2"></el-option>
            <el-option label="隔离病房" value="3"></el-option>
            <el-option label="重症监护室" value="4"></el-option>
          </el-select>
          <el-form-item label="选择房间" style="margin-left: 40px">
            <el-select v-model="formInline.ward_id" placeholder="病房类型">
              <el-option v-for="ward in this.ward_list" :label=ward.ward_code :value=ward.id></el-option>
            </el-select>
          </el-form-item>
        </el-form-item>

        <map-container class="map"></map-container>

        <!--        <baidu-map-->
        <!--            class="map"-->
        <!--            :center="{ lng: 116.426432, lat: 40.035117 }"-->
        <!--            :zoom="15"-->
        <!--        >-->
        <!--          <bm-marker-->
        <!--              :position="{ lng: 116.426432, lat: 40.035117 }"-->
        <!--              :dragging="true"-->
        <!--              animation="BMAP_ANIMATION_BOUNCE"-->
        <!--          >-->
        <!--          </bm-marker>-->
        <!--        </baidu-map>-->
      </el-form>
      <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
          :rules="rules"
      >
        <el-form-item label="住院时长(天)" prop="continuedTime">
          <div class="block">
            <el-slider
                v-model="formInline.continuedTime"
                style="width: 450px"
                :max="30"
                show-stops
            ></el-slider>
          </div>
        </el-form-item>
      </el-form>
      <p style="position: absolute; margin-top: 13px">普通病房</p>
      <el-progress
          :text-inside="true"
          :stroke-width="26"
          :percentage="wardRemainingProportion.pt"
          style="width: 300px; margin-left: 100px"
      ></el-progress>
      <p style="position: absolute; margin-top: 23px">高级病房</p>
      <el-progress
          :text-inside="true"
          :stroke-width="24"
          :percentage="wardRemainingProportion.gj"
          status="success"
          style="width: 300px; margin-top: 10px; margin-left: 100px"
      ></el-progress>
      <p style="position: absolute; margin-top: 22px">隔离病房</p>
      <el-progress
          :text-inside="true"
          :stroke-width="22"
          :percentage="wardRemainingProportion.gl"
          status="warning"
          style="width: 300px; margin-top: 10px; margin-left: 100px"
      ></el-progress>
      <p style="position: absolute; margin-top: 22px">重症监护室</p>
      <el-progress
          :text-inside="true"
          :stroke-width="20"
          :percentage="wardRemainingProportion.icu"
          status="exception"
          style="width: 300px; margin-top: 10px; margin-left: 100px"
      ></el-progress>
      <el-form></el-form>
      <el-form :inline="true" class="demo-form-inline" style="margin-top: 80px">
        <el-row>
          <el-button
              type="danger"
              round
              style="margin-left: 350px"
              @click="goBack"
          >返回
          </el-button
          >
          <el-button
              type="success"
              round
              style="margin-left: 30px"
              @click="InWard">办理住院
          </el-button>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import router from "../../router";
import MapContainer from "@/components/Map.vue";

export default {
  data() {
    return {
      formInline: {
        gender: "",
        result_info: "",
        department_info: "",
        gender_name: "",
        blood: "",
        data_birth: "",
        mobile: "",
        deptType: "",
        id: "",
        userAccount: "",
        userName: "",
        docAccount: "",
        docName: "",
        docType: "",
        drug: "",
        status: "",
        continuedTime: "",
        wardName: "",
        wardType: "",
        ward_id: "",
      },
      drugPriceList: [],
      alertResult: "",
      user: {},
      ward: {
        wardType: "",
        wardName: "",
      },
      wardType: [],
      wardName: [],
      ward_list: [],
      wardRemainingProportion: {
        pt: "",
        gj: "",
        gl: "",
        icu: "",
      },
      rules: {
        continuedTime: [{required: true}],
        wardType: [{required: true}],
        wardName: [{required: true}],
      },
    };
  },
  created() {
    this.$axios.get(this.$settings.BASE_URL + 'patient/createRoom/').then(response => {
      // console.log(response.data)  // [{},{},{},{}]
      // console.log('我在这哦')
      this.ward_list = response.data
    })
    this.user = this.$getSessionStorage("user");
    //初始化表单赋值
    this.selectPatientRegisterById();
    //初始化查询病房分类（下拉选）
    // this.selectWardType();
    //初始化查询病房占比（数据可视化）
    this.selectWardRemainingProportion();
    //console.log(this.wardRemainingProportion.PT)
  },
  updated() {
  },
  methods: {
    selectPatientRegisterById() {
      console.log(this.$route.query.row);
      this.formInline.id = this.$route.query.row.id
      this.formInline.userName = this.$route.query.row.name
      this.formInline.data_birth = this.$route.query.row.data_birth
      this.formInline.blood = this.$route.query.row.blood
      this.formInline.gender_name = this.$route.query.row.gender_name
      this.formInline.department_info = this.$route.query.row.department_info
      this.formInline.result_info = this.$route.query.row.result_info
      this.formInline.docName = this.$route.query.row.doctor_name
      this.formInline.docType = this.$getSessionStorage('user_type')
      this.formInline.mobile = this.$route.query.row.mobile
      this.formInline.gender = this.$route.query.row.gender
    },
    selectWardType() {
      //axios查询病房类型请求
      this.$axios
          .post("/ward/selectWardType")
          .then((Response) => {
            this.wardType = Response.data;
          })
          .catch((error) => {
            console.error(error);
          });
    },
    goBack() {
      this.$confirm("确认返回到住院信息界面？")
          .then((_) => {
            this.$router.push({
              path: "/index/inWard",
            });
          })
          .catch((_) => {
          });
    },
    InWard() {
      this.user = this.$getSessionStorage("user");
      this.$confirm(
          `确认入住${this.formInline.continuedTime}天`
      ).then((_) => {
        //axios住院请求
        this.$axios.post(this.$settings.BASE_URL + 'patient/hospital_info/', {
          patient_id: this.formInline.id,
          name: this.formInline.userName,
          data_birth: this.formInline.data_birth,
          blood: this.formInline.blood,
          gender: this.formInline.gender,
          mobile: this.formInline.mobile,
          department_name: this.formInline.department_info,
          result: this.formInline.result_info,
          doctor_name: this.formInline.docName,
          time_length: this.formInline.continuedTime,
          ward: this.formInline.ward_id,
        }).then((Response) => {
          this.$message({
            message: '恭喜您办理入住成功，望你早日康复',
            type: 'success',
            duration: 1000
          })
          window.setTimeout(function () {
            router.push({
              path: "/index/ward",
            });
          }, 1000)
        }).catch((error) => {
          console.error(error);
        });
        //删除掉PatientInfo中该用户的信息，因为他已经去到了HospitalInfo表中
        this.$axios.delete(this.$settings.BASE_URL + `patient/patient_info/${this.formInline.id}`).then(response => {
        })
      }).catch((_) => {
      });
    },
    formatTooltip(val) {
      return val / 100;
    },
    selectWardRemainingProportion() {
      //axios查询病房剩余占比（数据可视化）
      let init_num = 100
      // 查询数据库中每个病房类型的个数
      this.$axios.get(this.$settings.BASE_URL + 'system/ward_num/').then(response => {
        for (let dict of response.data) {
          if (dict.ward_type === 1) {
            this.wardRemainingProportion.pt = init_num - dict.num
          } else if (dict.ward_type === 2) {
            this.wardRemainingProportion.gj = init_num - dict.num
          } else if (dict.ward_type === 3) {
            this.wardRemainingProportion.gl = init_num - dict.num
          } else {
            this.wardRemainingProportion.icu = init_num - dict.num
          }
        }
      }).catch((error) => {
        console.error(error);
      });
    },
  },
  components: {
    MapContainer
  }
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card-toInWaed {
  width: 1080px;
  height: 700px;
  margin-top: 30px;
}

.map {
  position: absolute;
  width: 400px;
  height: 200px;
  margin-left: 630px;
}
</style>